<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;
      height: 100vh;
    }
    body > div {
      margin: 0 20px;
    }
    /* 在浅色背景上使用深色文字，在文字底部加上浅色投影效果最佳 */
    .box{
      padding: 1em;
      width: 200px;
      background-color: hsl(210, 13%, 60%);
      color: hsl(210, 13%, 30%);
      text-shadow: 0 1px 1px hsla(0,0%,100%,.7);
    }
    /* 在深色背景上使用浅色文字，在文字顶部加上深色投影效果最佳 */
    .box1{
      padding: 1em;
      width: 200px;
      background-color:hsl(210, 13%, 30%);
      color:hsl(210, 13%, 60%);
      text-shadow: 0 -1px 1px black;
    }

    /* 文字描边 */
    .box2{
      padding: 1em;
      width: 200px;
      background: deeppink;
      color: white;
      font-weight: bold;
      font-size: 1.5em;
      text-shadow: 
        .05em .05em black,
        -.05em .05em black,
        .05em -.05em black,
        -.05em -.05em black;
      /* text-shadow: 0 0 .05em black, 0 0 .05em black, 
        0 0 .05em black, 0 0 .05em black, 
        0 0 .05em black, 0 0 .05em black; */
    }

    /* 文字发光 */
    .box3{
      padding: 1em;
      background: #203;
      color: #ffc;
      transition: 1s;
      cursor: pointer;
      text-shadow: 0 0 .1em white, 0 0 .3em white;
    }
    .box3:hover{
      color: transparent;
    }

    /* 立体效果 */
    .box4{
      padding: 1em;
      background: #58a;
      color: white;
      font-size: 3em;
      font-weight: 600;
      text-shadow: 
        0 1px hsl(0, 0%, 85%),
        0 2px hsl(0, 0%, 75%),
        0 3px hsl(0, 0%, 65%),
        0 4px hsl(0, 0%, 55%),
        0 5px hsl(0, 0%, 45%),
        0 5px 10px black;
    }

    .box5{
      padding: 1em;
      color: white;
      font-size: 3em;
      font-weight: bold;
      background: hsl(0,50%,45%);
      letter-spacing: .1em;
      text-shadow: 
        1px 1px hsl(0,50%,25%), 2px 2px hsl(0,50%,25%),
        3px 3px hsl(0,50%,25%), 4px 4px hsl(0,50%,25%),
        5px 5px hsl(0,50%,25%), 6px 6px hsl(0,50%,25%),
        7px 7px hsl(0,50%,25%), 8px 8px hsl(0,50%,25%);
    }

    /* 环形文字 */
    .circular path{
      fill: none;
    }
    .circular {
      width: 20em;
      height: 20em;
      margin: 3em auto 0;
    }
    .circular svg{
      display: block;
      overflow: visible;
    }
  </style>
</head>
<body>
  <div class="box">
    The only way to get rid of a temptation is to yield to it.
    The only way to get rid of a temptation is to yield to it.
  </div>

  <div class="box1">
    The only way to get rid of a temptation is to yield to it.
    The only way to get rid of a temptation is to yield to it.
  </div>

  <div class="box2">
    The only way to get rid of a temptation is to yield to it.
    The only way to get rid of a temptation is to yield to it.
  </div>

  <div class="box3">
    ZXYONG
  </div>

  <div class="box4">
    CSS3d
  </div>

  <div class="box5">
    RETRO
  </div>

  <div class="circular">
    <svg viewBox="0 0 100 100">
    <path d="M 0,50 a 50,50 0 1,1 0,1 z"
    id="circle" />
    <text><textPath xlink:href="#circle">
    circular reasoning works because
    </textPath></text>
    </svg>
   </div>
</body>
</html>